<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热映电影</title>
    <script src="./Axios/axios.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            list-style: none;
        }
        img{
            display: block;
            width: 66px;
            height: 92px;
            margin-right: 10px;
        }
        .app{
            width: 100vw;
            height: 100vh;
            padding: 0 10px;
            overflow: auto;
        }
        .film{
            height: 124px;
            display: flex;
            align-items: center;

            div{
                flex: 1;
            }
        }
        .info{
            overflow: hidden;
        }
        p{
            width: 100%;
            color: #999;
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        button{
            width: 50px;
            height: 30px;
            background-color: orange;
            border: 0;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="app">
        <!-- <div class="film">
            <img src="" alt="">
            <div class="info">
                <h3>毒液</h3>
                <p>评分</p>
                <p>主演：安居客</p>
            </div>
            <button>购票</button>
        </div> -->
    </div>
    <script>
        const app = document.querySelector('.app')
        let list = [],
            total = 0,
            pageNum = 1,
            count = 0,
            cityId = location.search.split('=')[1] ||110100
            console.log(cityId)
        async function getList(){
            try{
                const res = await axios.get('https://m.maizuo.com/gateway',{
                    params:{
                        cityId,
                        pageNum,
                        pageSize:10,
                        type:1,
                        k:7895257
                    },
                    headers:{
                        'x-client-info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17218918638581224398323713","bc":"350300"}',
                        'x-host': 'mall.film-ticket.film.list'
                    }
                    
                })
                list = res.data.data.films
                total = res.data.data.total
                count += res.data.data.films.length
                renderList()
                console.log(res)
            }catch(e){
                    console.log(e)
            }finally{
                console.log('请求完成')
            }
        }
        app.addEventListener('scroll',(e) =>{
            const {clientHeight, scrollTop, scrollHeight} = e.target
            if(Math.ceil(clientHeight+scrollTop)>=scrollHeight && count < total){
                pageNum++
                getList()
            }
        })



        getList()
       
        function renderList(){
            console.log(list)
            app.innerHTML += list.map(item =>{
                return `
                <div class="film">
                    <img src="${item.poster}" alt="">
                    <div class="info">
                        <h3>${item.name}</h3>
                        <p>评分:${item.grade? item.grade : '暂未评分'}</p>
                        <p>主演：${item.actors?.map(v => v.name).join(' ')}</p>
                    </div>
                    <button>购票</button>
                </div>
                `
            }).join('')
        }

    </script>
</body>
</html>